<template>
<div class="home">
  <div class="jumbotron">
    <div class="wh jumbotron-inner"  v-html="header.resContent"></div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>     
  </div>
  <div class="w path">
    <span @click="goToPage('/index')">首页 </span>
    <template v-if="curTagId != '' ">
      <RightOutlined class="path-icon" />
      资讯列表
      <RightOutlined class="path-icon" />
      <span class="en">{{curTagId}}</span>
    </template>
    <template v-if="curCateId != '' ">
      <span @click="setCate([item.id])" v-for="item in path" :key ="item.id" > 
        <RightOutlined class="path-icon" />
        {{item.cateName}}
      </span>
    </template>
    <template v-if="curTagId == '' && curCateId == ''" ><RightOutlined class="path-icon" /> 资讯列表</template>
  </div>	
  <div class="w"  style="padding-bottom:20px;">
    <a-row class="list" :gutter="15" >
      <a-col  :xs=24 :sm=24 :md=17 :lg=17 :xl=17>
        <div class="tree" v-if="list.length == 0" style="padding:100px 0">
          <a-empty description="该分类暂无数据" />
        </div> 
        <a-list v-else :data-source="list">
          <template #renderItem = "{ item }">
          <a-list-item >
            <a-row class="info-content">
              <a-col :span="8" v-if="item.titleImg">
                <span @click="goToDetPage(item)" class="info-img">
                  <img :src="host+item.titleImg">
                </span>
              </a-col>
              <a-col :span="item.titleImg ? 16 : 24"  class="info-li">
                <h4 class="ellipsis"><span @click="goToDetPage(item)" >{{item.title}}</span></h4>
                <p class="hidden-xs">{{item.introduct}}</p>
              </a-col>
              <div class="text-bot">
                <ClockCircleOutlined /><span class="en">{{createdTime(item.created)}}</span>
                <UserOutlined /><span class="en">admin</span>
                <LikeOutlined @click="setLinkNum(item,'2')"/><span class="en">{{item.likeNum}}</span>
                <EyeOutlined /><span class="en">{{item.clickNum}}</span>
              </div>            
            </a-row>
          </a-list-item> 
          </template>
        </a-list>
        <div class="page" v-if="totalNum > 4">
          <a-pagination :current="page" :page-size="pageSize" @change="setPage" :total="totalNum" />
        </div>
      </a-col> 
      <a-col :xs=0 :sm=0 :md=7 :lg=7 :xl=7 style=" padding-bottom:5px;">
        <div class="tree">
          <h4 class="tree-tit">资讯分类</h4>
          <a-tree v-if="treeData.length > 0" style=" padding:0 0 15px 0;" :defaultExpandAll="true" :tree-data="treeData" blockNode :selectedKeys="selectedKey" @select="setCate" :replaceFields="{title:'cateName',key:'id'}"></a-tree>    	
        </div>
        <a-affix :offset-top="95">
          <div class="tree">
            <h4 class="tree-tit">热门标签</h4>
            <div class="tag en">
              <span v-for="item in tags" :class="{'cur' : curTagId == item.id}" @click="setCurTag(item.id)" :key="item.id">{{item.tagName}}</span>
            </div>
          </div>  
        </a-affix>
      </a-col>
    </a-row>
  </div>
  </div>
</template>
<script>
import axios from "@/global/axios";
import api from "@/global/api";
import { useRouter } from 'vue-router'
import { reactive,toRefs,onMounted, computed} from 'vue'
import {ClockCircleOutlined,UserOutlined,LikeOutlined,EyeOutlined,RightOutlined} from '@ant-design/icons-vue'
export default {
  components: {ClockCircleOutlined,UserOutlined,LikeOutlined,EyeOutlined,RightOutlined},
  setup(){
    const router = useRouter();    
    const listData = reactive({
      host:api.cosHttp,
      header:{},
      totalNum:0,
      list:[],
      path:[],
      treeData:[],
      tags:[],			
      selectedKey:[],
      listLoad:true,
      curCateId:'',
      curTagId:'',
			page:1,
			pageSize:6      
    });
    onMounted ( async () => {
      let _route = router.currentRoute.value;
      listData.curCateId = _route.params.cateId ? _route.params.cateId : '';
      if(listData.curCateId){
        listData.selectedKey = [listData.curCateId];
      }
      let _channel = {channel:'list'};
      let res = await axios.get(api.getChannel,{params:_channel});
      let pageData = res.data.pageData;
      listData.header = pageData.header;
      let list = await axios.get(api.getContentList);
      listData.totalNum = list.totalNum;
      listData.path = list.path;
      listData.list = list.data;  
      let treeData = await axios.get(api.getContentCate); 
 			listData.treeData = treeData.data;
			let tags = await axios.get(api.getContentTags);
			listData.tags = tags.data;	              
    });
 
		const goToDetPage = (item) => {
			router.push({path: '/detail', query:{id: item.id}});
		};
    const goToPage = (path) => {
      router.push(path);
    };
		const setCurTag = (_id) => {
			listData.curTagId = _id;
			getData('tag');
			listData.curCateId = '';
			listData.selectedKey = [];			
		};
		const setCate = (keys) => {
			let _curCateId = keys && keys.length > 0 ? keys[0] : '';
			if(listData.curCateId == _curCateId) return;
			listData.curCateId = _curCateId;
			listData.selectedKey = [listData.curCateId];
			getData('cate');
			listData.curTagId = '';
		};
		const  setPage = async (_page) => {
			listData.page = _page;
      window.scrollTo({top:0,behavior:"smooth"})      
			if(listData.curTagId){
				var _param = {tagId:listData.curTagId,page:listData.page,pageSize:listData.pageSize}
			}else if(listData.curCateId){
				var _param = {cateId:listData.curCateId,page:listData.page,pageSize:listData.pageSize}
			}else{
				var _param = {page:listData.page,pageSize:listData.pageSize}
			}
			let list = await axios.get(api.getContentList,{params:_param});    
      setTimeout(()=>{
        listData.totalNum = list.totalNum;
        listData.list = list.data;
      },300)
		};    
		const getData = async (type) => {
			if(type == 'tag'){
				var _param = {tagId:listData.curTagId}
			}else if(type == 'cate'){
				var _param = {cateId:listData.curCateId}
			};
			let list = await axios.get(api.getContentList,{params:_param});
      listData.totalNum = list.totalNum;     
			listData.list = list.data;
			listData.path = list.path;
		};
		const setLinkNum = async (item,_type) => {
			if(_type == 2){item.likeNum++;}
			let _tips = await axios.put(api.setContentTips+'/'+item.id,{type:_type},{ progress: false });
		};
    const createdTime = (val)=>{
      var paddingStr = function (_str) {
        return _str.length == 1 ? "0" + _str : _str
      }
      var _curDate = new Date(val);	
      var _YY = _curDate.getFullYear();
      var _MM = paddingStr(_curDate.getMonth() + 1 + '');
      var _DD = paddingStr(_curDate.getDate() + '');
      return `${_YY}-${_MM}-${_DD}`;
    };      
    return {
      ...toRefs(listData),
      goToDetPage,
      goToPage,
      setCate,
      setCurTag,
      setPage,
			createdTime,
      setLinkNum
    } 
  }
}
</script>
<style>
.ant-empty-description{color: rgba(0, 0, 0, 0.4);}
</style>
<style scoped>
.path{ height:30px; line-height:30px; font-size:16px;}
.path .path-icon{ font-size:12px; color:#666;}
.path span{ cursor:pointer; transition:all 0.2s}
.path a:hover,.path span:hover{ color:#00A6E0}
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative; height:190px; background:#2EA7E0 url(../assets/banner.png) no-repeat; background-size:cover;}
.jumbotron-inner{ height:190px; background-size:contain;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
.jumbotron >>> h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron >>> h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.list{ overflow:hidden; padding-top:15px;}
.list >>> .ant-list-split, .list >>> .ant-list-item {border-bottom: 0; margin-bottom:0; padding: 0 0 15px 0;}

.info-content { width:100%; overflow:hidden; background-color: #fff; padding:12px; box-shadow: 2px 2px 3px #ccc; position:relative;}
.info-img{ max-height:180px; display:block; width:100%; cursor:pointer;}
.info-img img{max-height:180px; width:100%;}
.info-li{ padding:0 12px; }
.info-li h4{ margin:12px 0 7px; font-size:18px; cursor:pointer;}
.info-li h4:hover{ color:#2EA7E0}	
.hidden-xs{ margin:0; font-size:14px; line-height:2; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.text-bot{ position:absolute; bottom:15px; right:25px; text-align:right; width:100%;}
.text-bot .en{font-size:16px; color:#999;}
.text-bot >>> svg{margin-right:4px; margin-left:15px; color:#999;}

.page{ text-align:right; padding:30px 0;}
.page >>> .ant-pagination-item,.page >>> .ant-pagination-item-link{ width:32px; height:32px; border-radius:1px; overflow:hidden;}

.tree{ background:#fff; margin-bottom:15px; box-shadow: 2px 2px 3px #ccc; padding-left:8px; overflow:hidden;}
.tree-tit{ height:50px; margin:0; line-height:52px; padding-left:20px; overflow:hidden; font-size:16px; border-bottom:1px solid #EFEFEE;}
.tree >>> .ant-tree-switcher{ margin:8px 0 0 0;} 
.tree >>> .ant-tree-treenode-switcher-open{ overflow:hidden;}
.tree >>> .ant-tree-node-content-wrapper{ transition:all 0.1s; border:0; height:35px;  line-height:35px; border-radius:0; padding:0 0 0 8px !important; overflow:hidden !important; width:100%; margin:0;}
.tree >>> .ant-tree li{ padding:0;} 
.tag{ padding:15px 13px; overflow:hidden;}
.tag span{ float:left; margin:0 5px 10px; cursor:pointer; border-radius:2px; border:1px solid #D9D9D9; background:FAFAFA; font-size:14px; padding:8px 10px; overflow:hidden;}
.tag span:hover{ background:#E8F8FF; border:1px solid #BAE7FF;}
.tag span.cur{ background:#BAE7FF; border:1px solid #BAE7FF;}
.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
@media (max-width: 450px) {
.info-li h4{ margin:2px 0 2px; font-size:16px;}		
.hidden-xs{ line-height:1.6; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.info-content{ padding-bottom:30px;}
.text-bot{ position:absolute; bottom:5px; height:20px; right:15px; text-align:right; width:100%;}
.text-bot .en{font-size:12px; color:#999;}
.text-bot i{ vertical-align:middle;margin-right:4px; margin-left:10px; font-size:12px;color:#999;}
}
</style>